<template>
  <div>
    <BaseSearch @exports="exports" :config="searchConfig" v-bind="form" ref="search"></BaseSearch>
    <BaseTable :columns="columns" v-bind="table"></BaseTable>
  </div>
</template>

<script>
import BaseSearch from '@/components/BaseSearch/index.vue'
import BaseTable from '@/components/BaseTable/index.vue'
import { FormTableMixin } from '@/mixins/form-table'
import http from '@/utils/request'
import { formattedAmount } from '@/utils/validator'
const service = async params => {
  const data = {
    ascs: [],
    descs: [],
    limit: params.limit,
    current: params.current,
    endTime: params.searchTime ? params.searchTime[1] : '',
    startTime: params.searchTime ? params.searchTime[0] : '',
  }

  const { records, total } = await http.get('/operations/getSigningList', {
    params: data,
  })
  return {
    data: records,
    total: total,
  }
}

export default {
  name: 'userNumber',
  mixins: [FormTableMixin(service)],
  components: {
    BaseSearch,
    BaseTable,
  },
  watch: {
    form: {
      handler(val, oldVal) {
        if (this.$refs['search']) {
          this.$refs['search'].submit()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      startTime: '',
      endTime: '',
      // 初始化时空白页
      searchConfig: [
        { component: 'date-picker', type: 'daterange', prop: 'searchTime', label: '选择日期', placeholder: '请选择' },
      ],
      columns: [
        { label: '编号', prop: 'number' },
        { label: '企业名称', prop: 'companyName' },
        {
          label: '区域',
          prop: 'region',
          render: (value, row) => {
            return <div>{row.region ? row.region : '--'}</div>
          },
        },
        {
          label: '签约授信金额（万元）',
          prop: 'applyAmount',
          render: (value, row) => {
            return <div>{formattedAmount(row.applyAmount)}</div>
          },
        },
        { label: '日期', prop: 'date' },
      ],
    }
  },

  methods: {
    async exports() {
      const res = await http.get('/operations/export', {
        responseType: 'blob',
        params: {
          endTime: this.form.value.searchTime ? this.form.value.searchTime[1] : '',
          statisticalDay: '',
          riskControlStatus: true,
          startTime: this.form.value.searchTime ? this.form.value.searchTime[0] : '',
          type: '1',
        },
      })
      let blob = new Blob([res.data], { type: 'application/vnd.ms-excel;charset=UTF-8' })
      let downloadElement = document.createElement('a')
      let href = window.URL.createObjectURL(blob) //创建下载的链接
      downloadElement.href = href
      downloadElement.download = '已签约用户数.xlsx' //下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放掉blob对象
    },
  },
}
</script>

<style lang="scss" scoped>
p.p-title {
  font-weight: bold;
  padding: 22px 0;
}
::v-deep {
  .el-range-separator {
    width: 6% !important;
  }
}
</style>
